CSS的選擇器分為基礎選擇器以及複合選擇器
本日將先說明基礎選擇器 DAY6將繼續說明複合選擇器
CSS中的基礎選擇器
單個選擇器組成,包含標籤選擇器、類選擇器、id選擇器、通配符選擇器
標籤選擇器
是指用HTML標籤名稱作為選擇器
按照標籤名稱分類,為頁面中某一類標籤指定統一的CSS樣式
標籤名{
屬性1 : 屬性值1;
屬性1 : 屬性值1;
...
}
主要功用 : 把某一類標籤全部選擇出來,像是所有的<div>
標籤和所有的<span>
標籤
優點 : 能快速為頁面中同類型的標籤統一設置樣式
缺點 : 不能設計差異化的樣式,只能選擇全部的同類標籤
類選擇器
若要單獨選一個或某幾個標籤,可以使用類選擇器
HTML元素以class屬性來設置類選擇器,CSS中類選擇器以"."來定義
<style>
.example{ //套用HTML標籤中的example類別
color : red; //把內容文字修改成顏色
}
</style>
<body>
<div class=example>
這是類選擇器的範例
</div>
</body>
備註:
1.可以理解為給HTML內標籤起了名子來表示 (class=想要添加的命名)
2.不可使用純數字或中文命名,一般都使用英文字母做命名
3.命名盡量有意義,也方便操作使用
多類名
給一個標籤指定多個類名來達到更多的操作目的
簡單理解就是一個標籤有多個名子
<div class=" red fong">多類名冊是 此處的div有red跟fong兩種類名</div>
備註:
多類名的使用場景:
id選擇器
id選擇器可以為標有特定id的HTML元素指定特定的樣式
HTML元素以id屬性來設置id選擇器,CSS中id選擇器以"#"來定義
/*
ex:將id為nav元素中的內容設置為紅色
*/
CSS語法:
#nav{
color: red;
}
HTML語法:
<div id=nav>
id選擇器內容
</div>
id選擇器和類選擇器的區別
通配符選擇器
通配符選擇器使用"*"定義,表示選取頁面中的所有元素(標籤)
*{
margin: 0;
padding: 0;
}
備註 :
通配符選擇器不需要調用,自動就給所有的元素使用樣式
特殊情況才使用,EX : 清除所有元素標籤的內外邊距)